	<template>
	<view>
		<!-- 分享 -->
		<u-popup v-model="isSharePopup" mode="bottom" border-radius="30">
			<view class="shareWrapper">
				<view class="shareBtns">
					<!-- #ifdef MP-WEIXIN -->
					<u-button class="wx" hover-class="none" size="mini" :hair-line='false' :custom-style="customBtnStyle" open-type="share">
						微信好友
					</u-button>
					<!-- #endif -->
					
					<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
					<u-button class="share" open-type="share" size="mini" :hair-line='false' :custom-style="customBtnStyle2" >
						分享好友
					</u-button>
					<!-- #endif -->
					
					<view class="btn copy" v-if="type == 'job'" @click="handleCopy">
						内容复制
					</view>
					<!-- <view :class=" type != 'job' ? 'btn bill margin' : 'btn bill'  " @click="handleCreateBill">
						生成海报
					</view> -->
				</view>
				<view class="shareClose" @click="close">取消</view>
			</view>
		</u-popup>
		<!-- 分享 -->

	</view>
</template>
  
<script>
	export default {
		name: 'Share',
		props:{
			type: String
		},
		data() {
			return {
				isSharePopup: false,
				customBtnStyle: {
					border: 'none', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					height:'24rpx',
					paddingTop: '130rpx',
					background: `url(${require('../../static/img/shareWx.png')}) no-repeat top center`,
					backgroundSize:'90rpx 90rpx'
				},
				customBtnStyle2: {
					border: 'none', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					height:'24rpx',
					paddingTop: '130rpx',
					background: `url(${require('../../static/img/shareOther.png')}) no-repeat top center`,
					backgroundSize:'90rpx 90rpx',
					// marginRight:this.type == 'job' ? '0' : '120rpx'
					marginRight:'0'
				}
			}
		},
		methods: {
			open() {
				this.isSharePopup = !this.isSharePopup
			},
			close() {
				this.isSharePopup = !this.isSharePopup
			},
			// 生成海报
			handleCreateBill() {
				this.close()
				this.$emit('handleCreateBill')
			},
			// 复制内容
			handleCopy() {
				this.close()
				this.$emit('handleCopy')
			},
		}
	}
</script>

<style lang="scss" scoped> 
	
	.shareWrapper {
		.shareBtns {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 66rpx;
			::v-deep.u-button::after{
				content: '';
				border: none;
			}
			.btn {
				padding-top: 115rpx;
				color: #797979;
				font-size: 26rpx;

				// &.wx {
				// 	background: url('../../static/img/shareWx.png') no-repeat top center;
				// 	background-size: 90rpx 90rpx;
				// 	padding-top: 0;
				// }

				&.copy {
					background: url('../../static/img/shareCopy.png') no-repeat top center;
					margin: 0  0 0 96rpx;
					background-size: 90rpx 90rpx;
				}

				&.bill {
					background: url('../../static/img/shareBill.png') no-repeat top center;
					background-size: 90rpx 90rpx;
				}
				&.margin{
					margin-left: 120rpx;
				}
			}
		}

		.shareClose {
			text-align: center;
			padding: 48rpx 0;
			color: #2A2A2A;
			font-size: 30rpx;
			border-top: 1rpx solid #F2F2F2;
		}
	}

	// }
</style>
